<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位搜索 - AI超级面试官平台</title>
    <link href="/vendors/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/fontawesome/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #667eea;
            --secondary-color: #764ba2;
            --accent-color: #f093fb;
            --text-dark: #2d3748;
            --text-light: #718096;
            --bg-light: #f7fafc;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
        }

        /* 统一导航栏样式 */
        .unified-navbar {
            background: white;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            height: 70px;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .unified-navbar-container {
            width: 100%;
            padding: 0 24px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .unified-navbar-left {
            flex-shrink: 0;
        }

        .unified-navbar-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #1f2937;
            font-weight: 700;
            font-size: 1.5rem;
        }

        .unified-navbar-brand i {
            color: var(--primary-color);
            margin-right: 8px;
            font-size: 1.2rem;
        }

        .unified-navbar-brand:hover {
            color: var(--primary-color);
            text-decoration: none;
        }

        .unified-navbar-center {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .unified-navbar-menu {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .unified-navbar-right {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .unified-nav-item {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: #6b7280;
            font-weight: 500;
            font-size: 14px;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.2s ease;
        }

        .unified-nav-item i {
            margin-right: 6px;
            font-size: 14px;
        }

        .unified-nav-item:hover {
            color: var(--primary-color);
            background: #eff6ff;
            text-decoration: none;
        }

        .unified-nav-item.active {
            color: var(--primary-color);
            background: #eff6ff;
            font-weight: 600;
        }



        .search-container {
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin: 30px 0;
        }

        .search-title {
            color: var(--primary-color);
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 30px;
            text-align: center;
        }

        .form-label {
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 8px;
        }

        .form-control, .form-select {
            border: 2px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px 15px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        .btn-search {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            border: none;
            border-radius: 10px;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-search:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
            color: white;
        }

        .btn-reset {
            background: transparent;
            border: 2px solid var(--text-light);
            border-radius: 10px;
            padding: 15px 40px;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-light);
            transition: all 0.3s ease;
            width: 100%;
        }

        .btn-reset:hover {
            background: var(--text-light);
            color: white;
        }

        .required {
            color: #e53e3e;
        }

        .search-tips {
            background: #e6fffa;
            border: 1px solid #81e6d9;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
        }

        .search-tips h6 {
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .search-tips ul {
            margin: 0;
            padding-left: 20px;
        }

        .search-tips li {
            color: #4a5568;
            margin-bottom: 5px;
        }

        .results-container {
            background: white;
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-top: 30px;
            display: none;
        }

        .job-card {
            border: 1px solid #e2e8f0;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            background: white;
        }

        .job-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
            border-color: var(--primary-color);
        }

        .job-title {
            color: var(--primary-color);
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .company-name {
            color: var(--text-dark);
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .job-info {
            color: var(--text-light);
            font-size: 0.95rem;
            margin-bottom: 5px;
        }

        .job-salary {
            color: #e53e3e;
            font-weight: 600;
            font-size: 1.1rem;
        }

        .job-number {
            color: #805ad5;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .loading {
            text-align: center;
            padding: 40px;
        }

        .spinner-border {
            color: var(--primary-color);
        }

        @media (max-width: 768px) {
            .search-container {
                padding: 20px;
                margin: 15px;
            }
            
            .search-title {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <!-- 引入统一导航栏 -->
    <div th:replace="~{fragments/navbar :: navbar('job-search')}"></div>

    <div class="container">
        <!-- 搜索表单 -->
        <div class="search-container">
            <h2 class="search-title">
                <i class="fas fa-search me-2"></i>
                智能职位搜索
            </h2>

            <!-- 搜索提示 -->
            <div class="search-tips">
                <h6><i class="fas fa-lightbulb me-2"></i>搜索提示</h6>
                <ul>
                    <li>职位名称：请输入具体的职位名称，如"Java开发工程师"、"产品经理"等</li>
                    <li>工作经验：根据您的实际工作年限选择对应的选项</li>
                    <li>学历要求：选择您的最高学历或期望的学历要求</li>
                    <li>薪资范围：输入您期望的最低薪资，单位为人民币元</li>
                </ul>
            </div>

            <form id="searchForm">
                <div class="row">
                    <!-- 职位名称 -->
                    <div class="col-md-6 mb-3">
                        <label for="jobName" class="form-label">
                            职位名称 <span class="required">*</span>
                        </label>
                        <input type="text" class="form-control" id="jobName" name="jobName" 
                               placeholder="请输入职位名称，如：Java开发工程师" required>
                    </div>

                    <!-- 城市 -->
                    <div class="col-md-6 mb-3">
                        <label for="city" class="form-label">
                            工作城市 <span class="required">*</span>
                        </label>
                        <input type="text" class="form-control" id="city" name="city" 
                               placeholder="请输入城市名称，如：北京、上海" required>
                    </div>

                    <!-- 工作经验 -->
                    <div class="col-md-6 mb-3">
                        <label for="workExperience" class="form-label">
                            工作经验 <span class="required">*</span>
                        </label>
                        <select class="form-select" id="workExperience" name="workExperience" required>
                            <option value="">请选择工作经验</option>
                            <option value="1">无经验</option>
                            <option value="2">1年以下</option>
                            <option value="3">1-3年</option>
                            <option value="4">3-5年</option>
                            <option value="5">5-10年</option>
                            <option value="6">10年以上</option>
                        </select>
                    </div>

                    <!-- 学历要求 -->
                    <div class="col-md-6 mb-3">
                        <label for="education" class="form-label">
                            学历要求 <span class="required">*</span>
                        </label>
                        <select class="form-select" id="education" name="education" required>
                            <option value="">请选择学历要求</option>
                            <option value="1">不限</option>
                            <option value="2">初中及以下</option>
                            <option value="3">中技</option>
                            <option value="4">高中</option>
                            <option value="5">中专/中技</option>
                            <option value="6">大专</option>
                            <option value="7">本科</option>
                            <option value="8">硕士</option>
                            <option value="9">MBA/EMBA</option>
                            <option value="10">EMBA</option>
                            <option value="11">博士</option>
                            <option value="12">其他</option>
                        </select>
                    </div>

                    <!-- 期望薪资 -->
                    <div class="col-md-6 mb-3">
                        <label for="salaryMin" class="form-label">期望最低薪资（元/月）</label>
                        <input type="number" class="form-control" id="salaryMin" name="salaryMin" 
                               placeholder="请输入期望的最低薪资，如：8000" min="0">
                    </div>

                    <!-- 公司名称 -->
                    <div class="col-md-6 mb-3">
                        <label for="companyName" class="form-label">公司名称（可选）</label>
                        <input type="text" class="form-control" id="companyName" name="companyName" 
                               placeholder="请输入目标公司名称">
                    </div>

                    <!-- 公司类型 -->
                    <div class="col-md-12 mb-4">
                        <label for="companyType" class="form-label">公司类型（可选）</label>
                        <select class="form-select" id="companyType" name="companyType">
                            <option value="">请选择公司类型</option>
                            <option value="1">国企</option>
                            <option value="2">外商独资</option>
                            <option value="3">代表处</option>
                            <option value="4">合资</option>
                            <option value="5">民营</option>
                            <option value="6">国家机关</option>
                            <option value="7">其他</option>
                            <option value="8">股份制企业</option>
                            <option value="9">上市公司</option>
                            <option value="10">事业单位</option>
                            <option value="11">银行</option>
                            <option value="12">医院</option>
                            <option value="13">学校/下级学院</option>
                            <option value="14">律师事务所</option>
                            <option value="15">社会团体</option>
                            <option value="16">港澳台公司</option>
                        </select>
                    </div>

                    <!-- 按钮 -->
                    <div class="col-md-6 mb-3">
                        <button type="submit" class="btn btn-search">
                            <i class="fas fa-search me-2"></i>
                            开始搜索
                        </button>
                    </div>
                    <div class="col-md-6 mb-3">
                        <button type="reset" class="btn btn-reset">
                            <i class="fas fa-redo me-2"></i>
                            重置表单
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 搜索结果 -->
        <div class="results-container" id="resultsContainer">
            <div class="loading" id="loadingIndicator">
                <div class="spinner-border" role="status">
                    <span class="visually-hidden">搜索中...</span>
                </div>
                <p class="mt-3">正在搜索职位，请稍候...</p>
            </div>
            
            <div id="searchResults" style="display: none;">
                <h4 class="mb-4">
                    <i class="fas fa-list me-2"></i>
                    搜索结果 <span id="resultCount" class="text-muted"></span>
                </h4>
                <div id="jobsList"></div>
            </div>

            <div id="noResults" style="display: none;">
                <div class="text-center py-5">
                    <i class="fas fa-search text-muted" style="font-size: 4rem;"></i>
                    <h5 class="mt-3 text-muted">未找到匹配的职位</h5>
                    <p class="text-muted">请尝试调整搜索条件或关键词</p>
                </div>
            </div>
        </div>
    </div>

    <script src="/vendors/bootstrap/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const searchForm = document.getElementById('searchForm');
            const resultsContainer = document.getElementById('resultsContainer');
            const loadingIndicator = document.getElementById('loadingIndicator');
            const searchResults = document.getElementById('searchResults');
            const noResults = document.getElementById('noResults');
            const jobsList = document.getElementById('jobsList');
            const resultCount = document.getElementById('resultCount');

            searchForm.addEventListener('submit', async function(e) {
                e.preventDefault();
                
                // 显示结果容器和加载指示器
                resultsContainer.style.display = 'block';
                loadingIndicator.style.display = 'block';
                searchResults.style.display = 'none';
                noResults.style.display = 'none';
                
                // 滚动到结果区域
                resultsContainer.scrollIntoView({ behavior: 'smooth' });

                // 收集表单数据
                const formData = new FormData(searchForm);
                const searchData = {
                    jobName: formData.get('jobName'),
                    city: formData.get('city'),
                    workExperience: parseInt(formData.get('workExperience')),
                    education: parseInt(formData.get('education')),
                    salaryMin: formData.get('salaryMin') ? parseInt(formData.get('salaryMin')) : null,
                    companyName: formData.get('companyName') || null,
                    companyType: formData.get('companyType') ? parseInt(formData.get('companyType')) : null,
                    number: formData.get('number') || null,
                    property: formData.get('property') || null
                };

                try {
                    const response = await fetch('/job/api/search', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify(searchData)
                    });

                    const result = await response.json();
                    
                    // 隐藏加载指示器
                    loadingIndicator.style.display = 'none';

                    if (result.success && result.data && result.data.length > 0) {
                        // 显示搜索结果
                        displayResults(result.data);
                        searchResults.style.display = 'block';
                        resultCount.textContent = `(共 ${result.total} 个职位)`;
                    } else {
                        // 显示无结果
                        noResults.style.display = 'block';
                    }

                } catch (error) {
                    console.error('搜索失败:', error);
                    loadingIndicator.style.display = 'none';
                    noResults.style.display = 'block';
                    alert('搜索失败，请稍后重试');
                }
            });

            function displayResults(jobs) {
                jobsList.innerHTML = '';
                
                jobs.forEach(job => {
                    const jobCard = document.createElement('div');
                    jobCard.className = 'job-card';
                    jobCard.innerHTML = `
                        <div class="d-flex justify-content-between align-items-start">
                            <div class="flex-grow-1">
                                <h5 class="job-title">${job.name || '职位名称'}</h5>
                                <div class="company-name">
                                    <i class="fas fa-building me-2"></i>
                                    ${job.companyname || '公司名称'}
                                </div>
                                <div class="job-info">
                                    <i class="fas fa-map-marker-alt me-2"></i>
                                    ${job.address || '工作地点'}
                                </div>
                                <div class="job-salary mt-2">
                                    <i class="fas fa-money-bill-wave me-2"></i>
                                    ${job.salary || '薪资面议'}
                                </div>
                                ${job.number ? `
                                    <div class="job-number mt-2">
                                        <i class="fas fa-hashtag me-2"></i>
                                        职位编号: ${job.number}
                                    </div>
                                ` : ''}
                            </div>
                            ${job.property ? `
                                    <div class="job-number mt-2">
                                        <i class="fas fa-hashtag me-2"></i>
                                        企业性质: ${job.property}
                                    </div>
                                ` : ''}
                            </div>
                            <div class="text-end">
                                ${job.url ? `
                                    <a href="${job.url}" target="_blank" class="btn btn-outline-primary btn-sm">
                                        <i class="fas fa-external-link-alt me-1"></i>
                                        查看详情
                                    </a>
                                ` : ''}
                            </div>
                        </div>
                    `;
                    jobsList.appendChild(jobCard);
                });
            }

            // 重置表单
            searchForm.addEventListener('reset', function() {
                resultsContainer.style.display = 'none';
            });
        });
    </script>
    
    <!-- 认证管理脚本 -->
    <script src="/js/auth.js"></script>
    <script src="/js/page-auth.js"></script>
</body>
</html> 